.side-tree-warp{
    position: relative; 
    height: 100%;
    .tree-close{
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translate(0,-50%);
        width: 17px;
        height: 83px;
        cursor: pointer;
        z-index: 2;
    }
    .resizeR{
        position: absolute;
        right: 24px;
        width: 3px;
        height: 100%;
        cursor: w-resize;
        z-index:2 ;
    }
    .side-tree{
        width:264px;
        height: calc(100% - 32px);
        min-width: 160px;
        // max-width: 500px;
        max-width: 264px;
        box-sizing: border-box;
        padding: 0 4px 0 0 !important;
        margin: 0 24px 0 0;
        border-right: 1px solid;
        border-image: linear-gradient(to bottom,  rgba(0,0,0,0),rgba(0,0,0,0.11), rgba(0,0,0,0)) 1;
        overflow: auto;
        position: relative;
        top: 16px;
        // transition: all 0.2s;
        // &::-webkit-scrollbar {
        //     display: none;
        //   }
   
    
        .search-box{
            display: flex;
            align-items: center;
            padding: 0 10px;

            .ant-input-affix-wrapper{
                background-color: rgba($color: #000000, $alpha: 0.2);
                border-color: transparent;

                .ant-input{
                    background-color: transparent;
                    color: rgba($color: #fff, $alpha: 0.7);

                    &::placeholder{color: rgba($color: #fff, $alpha: 0.7);}
                }
            }
        }
        .classify-box{
            margin: 25px 0 9px 0;
            display: flex;
            align-items: center;
            padding: 0 10px;
            .classify-title{
                flex:1;
                font-size: 14px;
                font-weight: 600;
                color: #fff;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                position: relative;

                &::before{
                    content: '';
                    width: 232px;
                    height: 2px;
                    background-color: rgba($color: #fff, $alpha: 0.1);
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: -15px;
                    margin: 0;
                }

                &.tag-title::before{display: none;}

                span{
                    cursor: pointer;
                }
                .tree-down-all{
                    width: 12px;
                    height: 12px;
                    margin-left: 6px;
                }
            }
            .new-icon{
                cursor: pointer;
                width: 18px;
                height: 18px;
                margin: 0 7px 0 0;
            }
            .tree-fun{
                width: 18px;
                height: 18px;
            }
        }
        .side-tree-draggable-tree{
            width: 100%;
            position: relative;
            background-color: transparent;
            //  选中树的状态样式
            .ant-tree-treenode-selected{
                background: rgba(249,96,29,0.05);
                border-radius: 4px 4px 4px 4px;
                .tree-title{
                    color: #fff !important;
                }
            }
            
            .ant-tree-treenode {
                position: relative;
                width:100%;
                height: 36px;
                padding: 0 !important;
                font-size: 14px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                &.ant-tree-treenode-selected,
                &:hover{
                    background-color: #2D51A0;
                    border-radius: 4px 4px 4px 4px;
                    .ant-tree-node-content-wrapper{
                        background-color: #2D51A0;
                        height: 36px;
                        position: relative;
                        .ant-tree-title{
                            .handleBox-tree{
                                display: block;
                            }
                            .tree-count{
                                display: none;
                            }
                        }
                    }
                }
                //  树前面箭头样式
                .ant-tree-switcher{
                    width: 20px;
                    height: 20px;
                    background-repeat: no-repeat;
                    background-size: 8px 8px;
                    background-position:  8px 8px;
                    position: relative;
                    top: 8px;
                    .anticon{
                        display: none;
                    }
                }
                .ant-tree-switcher_close{
                    background-image: url("../../../assets//img/meadiaIndex/tree-arrow-right.png");
                }
                .ant-tree-switcher_open{
                    background-image: url("../../../assets//img/meadiaIndex/tree-arrow-down.png");
                }
                //  树其他样式
                .ant-tree-node-content-wrapper{
                    flex: 1;
                    height: 36px;
                    //  overflow-x: hidden; // 不能hidden否则那个悬停框可能隐藏了
                    box-sizing: border-box;
                    padding: 8px 0 ;
                    .ant-tree-title{
                        display: flex;
                        min-width: 146px;
                        max-width: 214px;
                        .tree-folder-icon{
                            width: 20px;
                            height: 21px;
                            margin: 0 6px 0 0;
                        }
                        .tree-title{
                            flex:1;
                            font-size: 14px;
                            color: #fff;
                            display: inline-block;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .tree-count{
                            font-size: 14px;
                            color: #fff;
                            display: inline-block;
                        }
                        .handleBox-tree{
                            display: none;
                            .tree-add{
                                width: 18px;
                                height: 18px;
                                margin: 0 10px 0 0;
                            }
                            .handleBox-fn{
                                .tree-fun{
                                    width: 18px;
                                    height: 18px;
                                }
                            
                            }
                        }
                    }
                }
            }

            &.side-tree-draggable-tree-tag .ant-tree-treenode{
                &:hover{
                    background-color: #2D51A0;
                    border-radius: 4px 4px 4px 4px;
                    .ant-tree-node-content-wrapper{
                        background-color: #2D51A0;
                        height: 36px;
                        position: relative;
                        .ant-tree-title{
                            .handleBox-tree{
                                display: block;
                            }
                            .tree-count{
                                display: inline-block;
                            }
                        }
                    }
                }

                 .ant-tree-switcher_close{background-image: none;}
            }
        }
        .no-data-box{
            font-size: 16px;
            color: #999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 50%;
            top: 15%;
            transform: translate(-50%, 0);
            .no-data-icon{
                width: 120px;
            }
            .no-more-data{
                font-size: 16px;
                color: #999;
            }
        }
    }
}

.tree-oper-pop{
    .ant-popover-inner{
        padding: 8px !important;
    }
.tree-handleBox{
    // color: #303133;
    // padding: 8px;
    // font-size: 12px;
    // width: 90px;
    // background: #FFFFFF;
    // box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.16);
    // border-radius: 4px 4px 4px 4px;
    // z-index: 10;
    p{
        height: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .small-icon{
            width: 16px;
            height: 16px;
            margin: 0 6px 0 8px;
        }
        span{
            margin: 0 8px 0 0;
        }
    }
}
}